import { defineComponent, reactive } from "vue";
import { miniBox, miniMap, point, lookBtn, direction, pointBox, bigMap, title, mapPart, miniBoxM } from './MiniMap.module.scss';

interface pointType {
    position: { x: number; y: number };
    degrees: number;
}

export const miniMapObj = reactive({
    isShow: true,
    isLook: true,
    scale: 2.8,//移动比例
    default: [90, 90],
    point: {
        position: { x: 45.2, y: 45.2 },
        degrees: 0,
    } as pointType,
})
export default defineComponent({
    name: 'MiniMap',
    data() {
        return {
            isBigMap: false,
        }
    },
    mounted() {
    },
    methods: {
    },
    render() {
        const { isShow } = miniMapObj;

        return <div class={miniBox} style={{ display: `${isShow ? 'flex' : 'none'}`, zIndex: `${this.isBigMap ? 4 : 2}` }}>
            {/* <div class={`${lookBtn} flex-center`} style={{ background: `${!miniMapObj.isLook ? 'rgba(0, 0, 0, 0.7)' : '#0066CC'}` }} onClick={() => { miniMapObj.isLook = !miniMapObj.isLook }}>
                <img src="./img/map/icon.png" />
                查看地图
            </div> */}
            <div id="miniMap" class={`${miniMap} flex-center`} style={{ display: `${miniMapObj.isLook ? 'flex' : 'none'}` }} onClick={() => { this.isBigMap = true; }}>
                {/* <img src={mapSrc}/> */}
                <div class={pointBox} style={{
                    display: `${this.isBigMap ? 'none' : 'block'}`,
                    top: `${miniMapObj.point.position.y}px`,
                    left: `${miniMapObj.point.position.x}px`,
                    transform: `rotate(${miniMapObj.point.degrees}deg)`,
                }}>
                    <div class={direction} />
                    <div class={point} />
                </div>
            </div>
            <div class={`${bigMap} flex-center`} style={{ display: `${this.isBigMap ? 'flex' : 'none'}` }} onClick={() => { this.isBigMap = false; }}>
                <div class={title}>地图</div>
                <div class={`${mapPart} flex-center`}>
                    {/* <img src={bigmapSrc} /> */}
                    <div class={pointBox} style={{
                        top: `${miniMapObj.point.position.y}px`,
                        left: `${miniMapObj.point.position.x}px`,
                        transform: `rotate(${miniMapObj.point.degrees}deg)`,
                    }}>
                        <div class={direction} />
                        <div class={point} />
                    </div>
                </div>

            </div>
        </div >
            ;
    },
});